<template>
  <div class="pb50" v-loading="loading">
    <!--内容-->
    <div class="product-content">
      <!--基本信息-->
      <div class="common-form">基本信息</div>
      <div class="table-wrap">
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">订单id：</span>
              {{ detail.orderId }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">审批id：</span>
              {{ detail.orderFlowId }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">买家：</span>
              {{ detail.nickName }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">订单状态：</span>
              {{ detail.orderStatus }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">财务审核状态：</span>
              {{ detail.auditStatus == '-1' ? '无需审核' : detail.auditStatus == '0' ? '审核中' : detail.auditStatus == '1' ? '拒绝' : '同意' }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">购买总数：</span>
              {{ detail.totalNum }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">配送费用：</span>
              ￥{{ detail.expressPrice || '0.00' }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">包装费：</span>
              ￥{{ detail.packagePrice || '0.00' }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">优惠金额：</span>
              ￥{{ detail.couponPrice || '0.00' }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">定金(元)：</span>
              ￥{{ detail.depositPrice || '0.00' }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">总金额：</span>
              ￥{{ detail.totalPrice || '0.00' }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">优惠后总金额：</span>
              ￥{{ detail.orderPayPrice || '0.00' }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">定金：</span>
              ￥ {{ detail.depositTotalPrice || '0.00' }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">补交定金：</span>
              ￥{{ detail.restockDepositPrice || '0.00' }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">尾款：</span>
              ￥{{ detail.finalTotalPrice || '0.00' }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <!-- ywyxgShow 修改订单显示 修改内容 -->
          <el-col :span="15">
            <span class="gray9"> 修改的内容：</span>
            <el-input disabled style="width: 80%;" type="textarea" :rows="2" maxlength="500" show-word-limit
              placeholder="请输入修改内容" v-model="detail.remark">
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button size="small" style="border-radius: 50%;position: fixed;right: 3%;bottom: 15%;z-index: 9999;" type="success" v-if="detail.flowInfoList && detail.flowInfoList.length" @click="showPic(detail)">流程图</el-button>
          </el-col>
        </el-row>
      </div>

      <div class="common-form mt16">商品信息</div>
      <div class="table-wrap">
        <el-table size="small" v-loading="tabLoading" :data="detail.detailList" border style="width: 100%">
          <el-table-column prop="imagePath" label="封面">
            <template #default="scope">
              <img :src="scope.row.imagePath" style="width: 60px ; height:60px" />
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="标题" width="300"></el-table-column>
          <el-table-column prop="productAttr" label="规格属性" width="300"></el-table-column>
          <el-table-column prop="totalNum" label="数量" width="150">
          </el-table-column>
          <el-table-column prop="productPrice" label="产品价格" width="150">
            <template #default="scope">￥{{ scope.row.productPrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="couponPrice" label="优惠金额" width="150">
            <template #default="scope">￥{{ scope.row.couponPrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="totalPayPrice" label="优惠后总金额" width="150">
            <template #default="scope">￥{{ scope.row.totalPayPrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="depositRatio" label="定金比例" v-auth="'/order/order/xgsl'" width="150">
          </el-table-column>
          <el-table-column prop="depositPrice" label="定金价格" v-auth="'/order/order/xgsl'" width="150">
          </el-table-column>
          <el-table-column prop="finalPrice" label="尾款" width="150">
            <template #default="scope">￥{{ scope.row.finalPrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="packagePrice" label="包装费" width="150">
            <template #default="scope">￥{{ scope.row.packagePrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="productAddress" label="生产基地" width="150"></el-table-column>
        </el-table>
      </div>

      <!-- 订单审核 -->
      <div style="margin-bottom: 40px;" v-if="detail.auditBtn">
        <div class="common-form mt16">订单审核</div>
        <p>
          操作：
          <el-radio-group v-model="OrderAuditForm.auditType">
            <el-radio :label="10" border>同意</el-radio>
            <el-radio :label="20" border>拒绝</el-radio>
          </el-radio-group>
        </p>
        <p v-if="OrderAuditForm.auditType === 20">
          拒绝原因:
          <el-input type="textarea" v-model="OrderAuditForm.auditDesc" />
        </p>
      </div>
      <div class="common-button-wrapper">
        <el-button size="small" type="primary" v-if="detail.auditBtn" @click="OrderAudit" :loading="OrderAuditLoading">订单审核</el-button>
      </div>
    </div>

    <el-dialog title="流程审批图" v-model="dialogPicVisible" @close="dialogPicVisible = false" :close-on-click-modal="false" :close-on-press-escape="false" width="70%">
      <!--内容-->
      <div>
        <josnToProcess :list="flowInfoList">
          <template #default="{ items }">
            <div class="node_item" style="font-weight: bold;">
              【{{ items.stepName }}】
            </div>
            <div>
              <p v-if="items.auditPerson || items.assignee">审核人: {{ items.auditPerson || items.assignee }}</p>
              <p v-if="items.auditTime">审核时间: {{ items.auditTime }}</p>
              <!-- 0-待审批 10-审批中  20-通过 30-拒绝 -->
              <p v-if="items.status">审核状态: <el-tag :type="items.status == '10' ? 'warning' : items.status == '20' ? 'success' : items.status == '30' ? 'danger' :
                'info'"> {{ items.status == '10' ? '审批中' : items.status == '20' ? '通过' : items.status == '30' ? '拒绝' : '待审批' }}</el-tag>
              </p>
            </div>
          </template>
        </josnToProcess>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import OrderApi from "@/api/order.js";
import changeAddress from "@/components/order/changeAddress.vue";
import Add from "./dialog/Add.vue";
import { deepClone } from "@/utils/base.js";
import Logistics from "@/components/logistics/viewLogistics.vue";
import ProductSelect from "@/components/product/deliveryProduct.vue";
import { ElMessage } from "element-plus";
import josnToProcess from "@/components/flow-pic.vue"

export default {
  components: {
    ProductSelect,
    Add,
    changeAddress,
    Logistics,
    josnToProcess
  },
  props: {
    rowData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      OrderAuditForm: {
        auditType: '',
        auditDesc: ''
      },
      remark: '',
      OrderAuditLoading: false,
      activeName: 'sp',
      giftListShow: false,
      dialogVisibleImg: false,
      dialogVisibleImgUrl: '',
      tabLoading: false,
      auditBtnDetailsShow: false,

      detail: {},
      loading: false,
      statusArry: [10, 20, 30], // 10待支付  20 待确认 30 待付尾款 
      btnLoading: false,

      pageType: '',
      slEdit: false,
      djblEdit: false,
      ywyxgShow: false,
      cwshShow: false,
      cwtkShow: false,
      cwddshShow: false,
      cwwkshShow: false,

      orderProductLoading: false,
      spTotal: 0,
      orderSelctProduct: [],
      orderCreate: false,
      dialogPicVisible: false,
      flowInfoList: []
    };
  },
  created() {
    this.detail = this.rowData;
    this.loadDetail()

  },
  methods: {
    showPic() {
      this.dialogPicVisible = true;
    },
    // 流程图审批数据结构
    flowInfoListFunc(flowInfoList = []) {
      let Arr = [{
        stepName: '订单审批流程图',
        children: []
      }]
      if (flowInfoList && flowInfoList.length) {
        flowInfoList.map((val, index) => {
          val['id'] = index++;
          if (val.nodeList && val.nodeList.length == 1) {
            val['auditPerson'] = val.nodeList[0].auditPerson
            val['assignee'] = val.nodeList[0].assignee
            val['auditTime'] = val.nodeList[0].auditTime
            val['status'] = val.nodeList[0].status
          } else {
            val.nodeList.map((item, dex) => {
              item['id'] = index++ + '-' + dex++
              item['stepName'] = item.nodeName
            })
            val['children'] = val.nodeList
          }
        })
        Arr[0].children = flowInfoList
        console.log(Arr, 'Arr')

        return Arr
      }
    },
    loadDetail() {
      const $this = this
      $this.tabLoading = true
      OrderApi.getmodifyIdDetail(this.rowData.id, true)
        .then(result => {

          $this.tabLoading = false
          const { code, data } = result
          if (code === 1) {
            console.log('data', data)
            this.detail = data
            this.flowInfoList = this.flowInfoListFunc(this.detail.flowInfoList)

          }
        }).catch(error => {
          $this.tabLoading = false
        })
    },

    // 订单审核
    OrderAudit() {
      let Obj = {
        orderId: this.detail.orderId,
        orderFlowId: this.detail.orderFlowId,
        auditType: this.OrderAuditForm.auditType,
        auditDesc: this.OrderAuditForm.auditDesc,
      }
      this.OrderAuditLoading = true
      OrderApi.orderAuditV2(Obj).then(result => {
        this.OrderAuditLoading = false
        const { code, msg } = result
        if (code === 1) {
          ElMessage.success(msg)
          this.$emit('OrderDetailsAudit')
        } else {
          ElMessage.error(msg)
        }
      }).catch(error => {
        this.OrderAuditLoading = false
      })
    },

  },

};
</script>
<style lang="scss" scoped>
.package-pre {
  height: var(--el-component-size-small);
  line-height: var(--el-component-size-small);
  font-weight: bold;
}

.delete-icon {
  font-size: 20px;
}

.list {
  display: flex;
  margin-top: 20px;
  overflow: hidden;
  list-style: none;
  padding: 0;

  .item {
    flex: none;
    width: 200px;
    font-size: 14px;
    line-height: 14px;
    color: rgba(0, 0, 0, 0.85);

    .title {
      margin-bottom: 12px;
      font-size: 13px;
      line-height: 13px;
      color: #666666;
    }

    .value1 {
      color: #f56022;
    }

    .value2 {
      color: #1bbe6b;
    }

    .value3 {
      color: var(--prev-color-primary);
    }

    .value4 {
      color: #6a7b9d;
    }

    .value5 {
      color: #f5222d;
    }
  }
}

.img {
  width: 100%;
  height: 100%;
}

.com-image {
  width: 60%;
  height: 300px;
  border: 1px solid #f0f0f0;
  margin-bottom: 10px;
}
</style>
